body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .background_layout {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-color: black;
    .image_detail {
      z-index: 999;
      position: absolute;
      width: 22px;
      height: 22px;
      display: block;
      background-color: rgba(55,55,55,0.4);
      border: 3px solid rgba(200,200,200,0.35);
      overflow: hidden;
      font-size: 15px;
      padding: 5px;
      color: transparent;
      text-overflow: ellipsis;
      &:hover {
        color: white;
      }
    }
  }
  .mask_layout {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    display: none;
  }
  .info_container {
    margin-top: 30%;
    position: relative;
    width: 100%;
    height: 100%;
    .info_layout {
      display: block;
      z-index: 810;
      text-align: center;
      position: relative;
      top: 33%;
      width: 166px;   /*600px when contain text*/
      height: 166px;
      border-radius: 83px;
      margin: 0px auto;
      overflow: hidden;
      a {
        img {
          z-index: 800;
          position: absolute;
          border: 3px solid rgba(200,200,200,0.35);
          display: block;
          left: 0px;
          top: 166px;
          width: 160px;
          height: 160px;
          border-radius: 80px;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .avatar_mask {
        z-index: 800;
        left: 0px;
        top: 0px;
        display: block;
        position: absolute;
        width: 160px;
        height: 160px;
        border-radius: 80px;
        background-color: rgba(55,55,55,0.4);
        border: 3px solid rgba(200,200,200,0.35);
      }
    }

  }
}
